<template>
	<view class="content">
		<view class="info-block">
			<view class="title FangZhengHanZhenGuangBiaoJianTi">担保信息</view>
			<view class="text">温馨提示:只有属于【信用乡村推荐】或【双学双比荣誉】或【巾帼建功荣誉】或【创业明星】或【劳动模范】或【创业孵化示范基地统一提供反担】或【信用社区推荐】，才能进行免除反担保申请。
			</view>
			<view class="radio-item">
				<radio-group @change="radioChange">
					<label class="radio-list" v-for="(item, index) in list" :key="item.id">
						<view class="form-ctrl">
							<radio :value="item.id" :checked="index === current" style="transform:scale(0.7)"
								color="#FC0213" />
							<view>{{item.name}}</view>
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view style="display: flex;flex-direction: row;">
			<view class="btn1" @click="goBack">上一步</view>
			<view class="btn" @click="handleSave">下一步</view>
		</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js'
	export default {
		data() {
			return {
				list: [{
						id: 1,
						name: '抵(质)押品'
					},
					{
						id: 2,
						name: '第三人'
					},
					{
						id: 3,
						name: '免除反担保'
					}
				],
				current: 0
			}
		},
		methods: {
			radioChange(e) {
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].value === e.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			goBack() {
				uni.redirectTo({
					url: '/page_other/business_loan/entrepreneurship_information'
				})
			},
			handleSave() {
				uni.redirectTo({
					url: '/page_other/business_loan/information'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		padding: 30rpx;

		.info-block {
			margin-top: 30rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;

			.title {
				margin-top: 30rpx;
				margin-bottom: 20rpx;
				font-size: 38rpx;
			}

			.text {
				line-height: 70rpx;
				font-size: 32rpx;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #efefef;
			}

			.radio-item {
				padding-top: 30rpx;

				.radio-list {
					.form-ctrl {
						display: flex;
						flex-direction: row;
						margin-bottom: 30rpx;
					}
				}
			}
		}

		.btn1 {
			width: 290rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #FF0015;
			color: #FF0015;
			font-size: 28rpx;
			border-radius: 50rpx;
			margin: 0 auto;
			margin-top: 30rpx;
		}

		.btn {
			width: 290rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF0015;
			color: #fff;
			font-size: 28rpx;
			border-radius: 50rpx;
			margin: 0 auto;
			margin-top: 30rpx;
		}
	}
</style>